import React, { Component } from 'react'
import style from './index.module.scss'
import "./user.scss"
import {back_icon} from '../../common/icon/svg'
import { Space, Radio } from 'antd';
import {request} from '../../request/request'
import { DatePicker, List } from 'antd-mobile';
// import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
const img = require('../../common/image/user-head-default.png').default
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

// GMT is not currently observed in the UK. So use UTC now.
const utcNow = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));

// Make sure that in `time` mode, the maxDate and minDate are within one day.
let minDate = new Date(nowTimeStamp - 1e7);
const maxDate = new Date(nowTimeStamp + 1e7);
// console.log(minDate, maxDate);
if (minDate.getDate() !== maxDate.getDate()) {
  // set the minDate to the 0 of maxDate
  minDate = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
}

function formatDate(date) {
  /* eslint no-confusing-arrow: 0 */
  const pad = n => n < 10 ? `0${n}` : n;
  const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  return `${dateStr}`;
}

// If not using `List.Item` as children
// The `onClick / extra` props need to be processed within the component
const CustomChildren = ({ extra, onClick, children }) => (
  <div
    onClick={onClick}
    style={{ backgroundColor: '#fff', height: '45px', lineHeight: '45px', padding: '0 15px' }}
  >
    {children}
    <span style={{ float: 'right', color: '#888' }}>{extra}</span>
  </div>
);


export default class index extends Component {
    state={
        flag:false,
        flag1:false,
        value:1,
        flag2:false,
        date: now,
    }
    btn=()=>{
        let obj={
            nickname:this.nickname.value,
            phonenum:this.phonenum.value,
            signature:this.signature.value,
            email:this.email.value,
            uid:this.props.location.state.userInfo.uid,
            age:formatDate(this.state.date),
            head_url:this.img.src,
        }
        //修改个人信息的接口
        request({
            url:"/update",
            method:"POST",
            data:obj
        }).then(res=>{
            console.log(res.data);
            if(res.data.code==="01"){
                obj["head_url"]=res.data.data
                let userList = JSON.parse(localStorage.getItem("userList"))
                let newObj = Object.assign({},userList,obj)
                localStorage.setItem("userList",JSON.stringify(newObj))
                this.props.history.push('/me')
            }
        },err=>{
            console.log(err);
        })
    }
    //图片的编辑
    file=(e)=>{
        var f=new FileReader()  //创建实例
            f.readAsDataURL(e.target.files[0])
            f.onload=()=>{
             this.img.src= f.result
        }
    }
    componentDidMount(){
        let {nickname,phonenum,signature,email,age}=this.props.location.state.userInfo
        this.nickname.value=nickname
        this.phonenum.value=phonenum
        this.signature.value=signature
        this.email.value=email
        age=age?new Date(age):new Date()
        this.setState({
            date:age
        })
    }
    //学生认证
    approve=()=>{
        this.setState({
            flag:true
        })
        setTimeout(()=>{
            this.setState({
                flag1:true
            })
        },20)
    }
    // 确定认证
    affirm=()=>{
        let obj={
            realname:this.realname.value,
            collage:this.college.value,
            studentid:this.studentid.value,
            sex:this.state.value,
            check:this.check.checked,
            uid:this.props.location.state.userInfo.uid,
            stuAuth:1
        }
        let active = Object.keys(obj).every(item=>{
            return obj[item]
        })
        if(active){
            //学生认证接口
            request({
                url:"/approve",
                method:"POST",
                data:obj
            }).then(res=>{
                if(res.data.code==="01"){
                    let userList = JSON.parse(localStorage.getItem("userList"))
                    let newObj = Object.assign({},userList,obj)
                    localStorage.setItem("userList",JSON.stringify(newObj))
                    alert("认证成功")
                }else{
                    alert("认证失败,请重试")
                }
                this.back()
                this.props.history.push("/me")
            })
        }else{
            this.setState({
                flag2:true
            })
            setTimeout(()=>{
                this.setState({
                    flag2:false
                })
            },1000)
        }
        
    }
    // 退出学生认证
    back=()=>{
        this.setState({
            flag1:false
        })
        setTimeout(()=>{
            this.setState({
                flag:false
            })
        },200)
    }
    // 出生日期
     onChange=(date,dateString)=>{
        this.age=dateString
    }
      //性别
     onChanges = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value:e.target.value
        })
    };
    render() {
        console.log(this.props.location.state.userInfo)
        let {head_url,stuAuth}=this.props.location.state.userInfo
        return (
            <div className={style.user}>
                <div className={style.head}>
                    <span onClick={()=>{this.props.history.push('/me')}}>{back_icon}</span>
                </div>
                <p  className={style.msg}>
                    个人信息
                </p>
                <div className={style.img}>
                    {
                        head_url?<img src={"/apis/"+head_url} ref={c=>this.img=c}></img>:
                        <img src={img} ref={c=>this.img=c}></img>
                    }
                    <input type="file" style={{display:"none"}} ref={c=>this.c=c} onChange={this.file}></input>
                    <div className={style.mark} onClick={()=>{this.c.click()}}>编辑图片</div>
                </div>
                <div className={style.info}>
                    <div className={style["info-list"]}>
                         <span>昵称</span>
                         <input ref={c=>this.nickname=c}></input>
                    </div>
                    <div className={style["info-list"]}>
                        <span>个性签名</span>
                        <input ref={c=>this.signature=c}></input>
                    </div>
                    <div className={style["info-list"]}>
                        <span>手机号</span>
                        <input ref={c=>this.phonenum=c}></input>
                    </div>
                    <div className={style["info-list"]}>
                        <span>邮箱</span>
                        <input ref={c=>this.email=c}></input>
                    </div>
                    <div className={style["info-list"]}>
                        {/* <span>出生日期</span> */}
                        {/* <Space direction="vertical">
                            <DatePicker onChange={this.onChange} />
                        </Space> */}
                        <DatePicker
                        minDate={new Date(1930,1,1,0,0,0)}
                        mode="date"
                        title="出生日期"
                        extra="Optional"
                        value={this.state.date}
                        onChange={date => this.setState({ date })}
                        >
                        <List.Item arrow="horizontal">Date</List.Item>
                        </DatePicker>
                    </div>
                    <div className={style["info-list"]}>
                        <span>学生认证</span>
                        {
                            stuAuth?<span className={style.zuo} style={{color:"#EDA82C"}}>已认证</span>:
                            <span className={style.zuo} onClick={this.approve}>&gt;</span>
                        }
                    </div>
                </div>
                <div className={style.btn} onClick={this.btn}>
                    确认更改
                </div>
                {
                   this.state.flag?<div className={this.state.flag1?style.max+" "+style.active:style.max}>
                       <div className={this.state.flag1?style.min+" "+style.active:style.min}>
                           <span className={style.back} onClick={this.back}>X</span>
                            <h2>学生认证</h2>
                            <div className={style["min-msg"]}>
                                <div >
                                    <span>所在院校：</span>
                                    <input ref={c=>this.college=c}></input>
                                </div>
                                <div>
                                    <span>真实姓名：</span>
                                    <input ref={c=>this.realname=c}></input>
                                </div>
                                <div>
                                    <span>学号：</span>
                                    <input ref={c=>this.studentid=c}></input>
                                </div>
                                <div className={style.sex}>
                                    <span className={style.type}>性别：</span>
                                    <Radio.Group onChange={this.onChanges} value={this.state.value}>
                                        <Radio value={1}>男</Radio>
                                        <Radio value={2}>女</Radio>
                                    </Radio.Group>
                                </div>
                                <div className={style.xieyi}>
                                    <label><input type="checkbox" ref={c=>this.check=c}></input>同意,并且已阅读本公司的协议</label>
                                </div>
                            </div>
                            <div className={style.affirm} onClick={this.affirm}>认证</div>
                       </div>
                   </div>:null 
                }
                {
                    this.state.flag2?<div className={style.tishi}>有未勾选或填写的内容</div>:null
                }
            </div>
        )
    }
}
